import { defineComponent, ref, h, resolveComponent } from 'vue';
import Basic from './Basic.vue';
import Test from './Test.vue';
import Test_dialog from './Test_dialog.vue';

import TmPopupSearch1 from './TmPopupSearch/TmPopupSearch1.vue';
import TmPopupSearchSlot from './TmPopupSearch/TmPopupSearchSlot.vue';
export default defineComponent({
  name: 'App',
  props: {},
  emits: [],
  setup(props, { attrs, emit, expose, slots }) {
    expose({});

    const model = ref('TmPopupSearch1');

    return () => {
      return (
        <div class='block'>
          <div class='block-'>
            <t-select
              v-model={model.value}
              options={[
                // { label: 'Basic', value: 'Basic' },
                { label: '预制模板', value: 'TmPopupSearch1' },
                { label: '插槽', value: 'TmPopupSearchSlot' },
                // { label: '依赖组件功能验证', value: 'Test' },
                // { label: 'Test_dialog', value: 'Test_dialog' },
              ]}
            ></t-select>
          </div>
          {'Basic' == model.value && (
            <div class='block-'>
              <h5 class='title'>原始</h5>
              <Basic />
            </div>
          )}
          {'Test' == model.value && (
            <div class='block-'>
              <h5 class='title'>依赖组件功能验证</h5>
              <Test />
            </div>
          )}
          {'Test_dialog' == model.value && (
            <div class='block-'>
              <h5 class='title'>Test_dialog</h5>
              <Test_dialog />
            </div>
          )}
          {'TmPopupSearch1' == model.value && (
            <div class='block-'>
              <h5 class='title'>预制模板</h5>
              <TmPopupSearch1 />
            </div>
          )}
          {'TmPopupSearchSlot' == model.value && (
            <div class='block-'>
              <h5 class='title'>插槽</h5>
              <TmPopupSearchSlot />
            </div>
          )}
          {/* <div class='block-'>
            <h5 class='title'>{model.value}</h5>
            {h(resolveComponent(model.value))}
          </div> */}
        </div>
      );
    };
  },
});
